<template>
  <div class="switch_button">
    <input
      :checked="active"
      :id="id"
      type="checkbox"
      @change="$emit('update:active', $event.target.checked)"
    />
    <label class="switch" :for="id" />
  </div>
</template>

<script>

import { ref } from "vue";
import { S4 } from "../utils/RandomUtils.js";

export default {
  props: {
    active: Boolean,
  },
  setup() {
    const id = ref(S4())
    return { id }
  }
}
</script>

<style scoped lang="less">
.switch_button {
  --button-width: 48px;
  --button-height: 24px;
  --button-active-color: rgba(255, 255, 255, 0.1);
  --button-off-color: rgba(255, 255, 255, 0.4);
  --button-on-color: #f5d93b;

  --indicator-off-width: 8px;
  --indicator-off-height: 4px;
  --indicator-on-width: 16px;
  --indicator-on-height: 16px;
  --indicator-off-color: white;
  --indicator-on-color: white;

  &.small {
    --button-width: 36px;
    --button-height: 18px;
    --indicator-off-width: 6px;
    --indicator-off-height: 3px;
    --indicator-on-width: 10px;
    --indicator-on-height: 10px;
  }

  &.large {
    --button-width: 56px;
    --button-height: 30px;
    --indicator-off-width: 9px;
    --indicator-off-height: 4px;
    --indicator-on-width: 20px;
    --indicator-on-height: 20px;
  }
}

.switch {
  width: var(--button-width);
  height: var(--button-height);
  background-color: var(--button-off-color);
  border-radius: calc(var(--button-width) / 2);

  display: flex;
  cursor: pointer;
  position: relative;
  align-items: center;
  transition: all 0.3s ease;

  &:active {
    background-color: var(--button-active-color);
  }

  &::before {
    content: "";
    position: absolute;
    width: var(--indicator-off-width);
    height: var(--indicator-off-height);
    background-color: var(--indicator-off-color);
    border-radius: calc(var(--indicator-off-width) / 2);
    right: calc(var(--button-width) - var(--indicator-off-width) * 2);
    transition: all 0.3s ease;
  }
}

input:checked ~ label {
  background-color: var(--button-on-color);

  &::before {
    height: var(--indicator-on-height);
    width: var(--indicator-on-width);
    background-color: var(--indicator-on-color);
    border-radius: calc(var(--indicator-on-width) / 2);
    right: calc(calc(var(--button-height) - var(--indicator-on-height)) / 2);
  }
}

input {
  display: none;
}
</style>
